<div class="p-10 flex flex-col">
  <div class="form-section-title">
    {{ 'policy_definition_page.metadata' | translate }}
  </div>
  <!--  ID -->
  <mat-form-field
    *ngIf="form.group.controls.id; let ctrl"
    id="form-field-id"
    color="accent">
    <mat-label>ID</mat-label>
    <input matInput autocomplete="newvalue" [formControl]="ctrl" />
    <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">{{
      validationMessages.invalidWhitespacesOrColonsMessage
    }}</mat-error>
    <mat-error *ngIf="ctrl.invalid && ctrl.errors?.idAlreadyExists">{{
      validationMessages.idExistsErrorMessage
    }}</mat-error>
  </mat-form-field>

  <div class="form-section-title">
    {{ 'policy_definition_page.expression' | translate }}
  </div>

  <policy-form-expression
    [treeNode]="expressionFormHandler.tree.root"></policy-form-expression>

  <div class="flex justify-end gap-4 my-4">
    <button mat-stroked-button routerLink="/policies" [disabled]="loading">
      {{ 'general.cancel' | translate }}
    </button>

    <button
      color="primary"
      mat-raised-button
      [disabled]="loading || !form.group.valid"
      (click)="onSave()">
      {{ 'general.create' | translate }}
    </button>
  </div>
</div>
